<template>
    <div class="l-from-body" >
        <el-form :model="formData" :rules="rules" size="mini"  ref="form" label-width="60px" >
            <el-col :span="24">
                <el-form-item v-if="ready" :label="$t('上级')" prop="f_ParentId">
                    <l-tree-select
                        v-model="formData.f_ParentId"
                        
                        :lazy="true"
                        :treeLoad="treeLoad"
                        labelKey="f_AreaName"
                        valueKey="f_AreaCode"

                        :getValue="getValue"
                        >
                    </l-tree-select>
                </el-form-item>
            </el-col>
            <el-col :span="24">
                <el-form-item :label="$t('编号')" prop="f_AreaCode">
                    <el-input v-model="formData.f_AreaCode"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="24">
                <el-form-item :label="$t('名称')" prop="f_AreaName">
                    <el-input v-model="formData.f_AreaName"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="24">
                <el-form-item :label="$t('状态')" prop="f_EnabledMark" >
                        <el-switch
                        :active-value="1"
                        :inactive-value="0"
                        v-model="formData.f_EnabledMark"
                        >
                    </el-switch>
                </el-form-item>
            </el-col>
            <el-col :span="24">
                <el-form-item :label="$t('描述')" prop="f_Description">
                    <el-input type="textarea" v-model="formData.f_Description"></el-input>
                </el-form-item>
            </el-col>
        </el-form>
    </div>
</template>
<script>
export default {
    data(){
        return {
            pOptions:[],
            formData:{
                f_ParentId:'0',
                f_AreaCode:'',
                f_AreaName:'',
                f_EnabledMark:1,
                f_Description:''
            },
            rules: {
                f_AreaCode: [
                    { required: true, message: 'please enter' },
                    { validator: this.lr_existDbFiled,keyValue:() => { return this.formData.f_AreaId },tableName:'lr_base_area',keyName:'f_AreaId',trigger: 'blur'}
                ],
                f_AreaName: [
                    { required: true, message: 'please enter' }
                ]
            },
            ready:true
        };
    },
    created () {
    },
    methods:{
        async treeLoad(node, callback){
            await this.lr_loadAreas(node.key || '0')
            if(this.$validatenull(this.formData.f_AreaId)){
                callback(this.lr_areas[node.key || '0'])
            }
            else{
                callback(this.lr_areas[node.key || '0'].filter(t=>t.f_AreaId != this.formData.f_AreaId ))
            }
        },
        resetForm(){
            this.formData.f_AreaId = ''
            this.formData.f_ParentId = '0'
            this.$refs.form && this.$refs.form.resetFields()

            this.ready = false
            this.$nextTick(()=>{
                this.ready = true
            })
        },
        // 校验表单
        validateForm(callback){
            this.$refs.form.validate((valid) => {
                if(valid){
                    callback()
                }
            })
        },
        setForm(data){
            this.ready = false
            this.formData = this.$deepClone(data)
            this.$nextTick(()=>{
                this.ready = true
            })
        },
        getForm(){
            return this.$deepClone(this.formData)
        },
        getValue(id,callback){
            if(id == '0'){
                callback([])
            }
            else{
                this.$store.dispatch("data/area/get",id).then(res =>{
                    if(res){
                        callback([res.f_AreaName])
                    }
                })
            }

            
        }
    }
}
</script>
<style lang="scss" scoped>
</style>